<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="zh-tw" style="overflow: visible;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>我的天燈</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="image/x-icon" />
<!-- index_cover -->
<link href="light/css/index_style.css" rel="stylesheet" />
<link href="light/css/bg.css" rel="stylesheet" />
<!-- reset.css -->
<link rel="stylesheet" href="light/css/reset.css" media="screen">
<link rel="stylesheet" href="css/reset.css" media="screen">
<!-- Skeleton grid system -->
<link rel="stylesheet" href="light/css/skeleton.css" media="screen">
<link rel="stylesheet" href="css/skeleton.css" media="screen">
<!-- css -->
<link rel="stylesheet" href="light/css/style.css" media="screen">
<link rel="stylesheet" href="light/css/cardHealth.css" media="screen">
<link rel="stylesheet" href="light/css/cardSpecial.css" media="screen">
<link rel="stylesheet" href="light/css/hint.css" media="screen">
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- lantern -->
<link rel="stylesheet" href="light/css/lantern.css">
</head>

<body class="bodybg lantern_nav_chg" style="overflow: visible;">
	<%
		if (session.getAttribute("loginMember") != null) {
	%>
	<div class="list-screen clearfix">
		<div class="navfull">
			<div class="container">
				<div class="grid_12">
					<div class="logo">
						<a href="index">Proactive</a>
					</div>
					<ul class="topnav">
						<c:forEach items="${menuList}" var="menu">
							<li><a href="${menu.url}" class="${menu.classString1}">
									${menu.icon} ${menu.name} </a></li>
						</c:forEach>
					</ul>
					<ul class="login">

						<li><a href="aboutme?id=${loginMember.memberNO}"
							class="loginImg"> <img src="${loginMember.photoPath}">
						</a>
							<ul class="loginDropdown hide">
								<li><a href="aboutme?id=${loginMember.memberNO}">關於我</a></li>
								<li><a href="memberCourse?id=${loginMember.memberNO}">我創作</a></li>
								<li><a href="collectCourse?id=${loginMember.memberNO}">我收藏</a></li>
								<li><a href="memberCard?id=${loginMember.memberNO}">耶誕卡片</a></li>
								<li><a href="logout">登出</a></li>
							</ul>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<%
		}
	%>
	
	
	<p class="mylanterntitle">我送出的祝福</p>
	
	
	<div class="mylanternrow">
			<c:forEach items="${lightList}" var="light">
		<div class="wrapper" id="${light.id}">
			<img class="my_lantern" src="${light.imagePath}">
			<span class="text">To: ${light.receiver}</span>
			<div class="edit_hover_class">
  				<a href="javascript:;" class="delBtn" data-id="${light.id}"><img src='light/img/trash_can.png' /></a>
			</div>
		</div>
		
			
			</c:forEach>
		</div>
	<div class="icon_chg">
		<span class="hint--top" data-hint="返回活動主頁">
			<div class="icon icon4 hvr-float-shadow"><a href="lantern"><img class="introduce" src="light/img/iconmonstr-home-4-icon-256.png"></a></div><!-- 返回活動主頁 -->
		</span>
	</div>
	
	<!--顯示卡片 -->
	<div id="view" style="display: none;"></div>
	
	<!--刪除卡片 -->
	<form id="delForm" method="post" action="delLight">
    	<input type="hidden" id="id" name="id">
    </form>
	
	<!-- import jquery -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<!-- some jquery method we use -->
	<script src="light/js/bg.js"></script>
	<script src="light/js/jquery.bpopup.min.js"></script>
	<script>
		$('.wrapper').click(function() {
			var id=this.id;
			$.ajax({
				type:"post",
				url : "checkLightStatus",
				data :{id:id},
				success:function(html){
					var loadUrl=html;
					$('#view').bPopup({
				        content:'iframe',
				        contentContainer:'#view',
				        position : [ 400, 175 ],
				        loadUrl:loadUrl
				    });   
				}
				
			});	
		});
		
		$(".delBtn").click(function(){
        	var id = $(this).attr("data-id");
        	var msg = "是否刪除?";
        	var flag;
        	var flag = confirm(msg);
        	if(flag){
            	$("#id").val(id);
            	$("#delForm").submit();
        	}
        });
		
	</script>
</body>
</html>